<template>
  <div class="goods-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div class="text item">
        <el-input placeholder="请输入商品名称" v-model="searchText" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="searchGoods"></el-button>
        </el-input>
        <el-button type="success" class="addbtn" @click="goAdd">添加商品</el-button>
      </div>
      <!-- 商品列表 -->
      <el-table :data="tableData" border style="width: 100%" class="goodsTable" stripe>
        <!-- 索引列非Id -->
        <el-table-column prop="" label="#" width="50" type="index">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称">
        </el-table-column>
        <el-table-column prop="goods_price" label="价格（元）" width="120">
        </el-table-column>
        <el-table-column prop="goods_sellNum" label="已售（件）" width="120">
        </el-table-column>
        <el-table-column prop="createdAt" label="发布日期" width="120">
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="editGoods(scope.row)" size="mini" type="success" icon="el-icon-edit"></el-button>
            <el-button @click="delGoods(scope.row)" size="mini" type="danger" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="total" class="fy" :page-size="pageSize" @current-change='changeCurrent'>
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
export default {
  name: 'GoodsCom',
  data() {
    return {
      searchText: '',
      tableData: [
        {
          id: 1,
          name: '高档电视',
          price: '8000',
          sell: '245',
          date: '2022-1-1'
        },
        {
          id: 2,
          name: '劳力士手表',
          price: '300',
          sell: '1455',
          date: '2022-1-1'
        },
        {
          id: 3,
          name: '劳力士手表11111111111',
          price: '300',
          sell: '66',
          date: '2022-1-1'
        },
        {
          id: 4,
          name: '劳力士手表222222222222222',
          price: '300',
          sell: '235',
          date: '2022-1-1'
        },
        {
          id: 5,
          name: '劳力士手表3333333333333',
          price: '300',
          sell: '155',
          date: '2022-1-1'
        },
        {
          id: 6,
          name: 'PS5游戏机',
          price: '5300',
          sell: '11',
          date: '2022-1-1'
        }
      ],
      // 查询项
      currentPage: 1,
      pageSize: 5,
      total: 0
    }
  },
  methods: {
    // 搜索
    async searchGoods() {
      const { data: rel } = await this.$http.get(`searchGoods?name=${this.searchText}`)
      this.tableData = rel.data
      // 判断搜索框是否有值，如果有就带着文本一起分页查询，如果没有就正常翻页调数据
    },
    editGoods(row) {
      console.log(row.id)
      this.$router.push(`/home/goodsDetail/${row.id}`)
    },
    goAdd() {
      this.$router.push('/home/goodsDetail')
    },
    async goodsInit() {
      const { data: rel } = await this.$http.get(`goods?currentPage=${this.currentPage}&pageSize=${this.pageSize}`)
      if (rel.code === 20000) {
        this.tableData = rel.data.rows
        this.total = rel.data.count
      } else {
        this.$message.error('获取商品列表失败')
      }
    },
    // 页码变化
    changeCurrent(val) {
      this.currentPage = val
      this.goodsInit()
    },
    // 删除
    delGoods(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: rel } = await this.$http.delete(`goods/${row.id}`)
          if (rel.code === 20000) {
            this.goodsInit()
            this.$message({
              type: 'success',
              message: '删除商品成功!'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },
  created() {
    this.goodsInit()
  }
}
</script>

<style scoped>
.box-card {
  margin-top: 20px;
}
.input-with-select {
  width: 500px;
}
.addbtn {
  margin-left: 20px;
}
.goodsTable {
  margin-top: 20px;
}
.fy {
  margin-top: 20px;
}
</style>
